<template>
  <div>
    <div class="layui-container fly-marginTop">
      <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief" lay-filter="user">
          <ul class="layui-tab-title">
            <li><router-link :to="{ name: 'login' }">登录</router-link></li>
            <li class="layui-this">
              <router-link :to="{ name: 'register' }">注册</router-link>
            </li>
          </ul>
          <div
            class="layui-form layui-tab-content"
            id="LAY_ucm"
            style="padding: 20px 0"
          >
            <div class="layui-tab-item layui-show">
              <div class="layui-form layui-form-pane">
                <form method="post">
                  <div class="layui-form-item">
                    <label for="L_email" class="layui-form-label">邮箱</label>
                    <validationProvider
                      rules="required|email"
                      v-slot="{ errors }"
                      name="email"
                    >
                      <div class="layui-input-inline">
                        <input
                          type="text"
                          name="loginName"
                          v-model="member.loginName"
                          placeholder="请输入您的邮箱"
                          autocomplete="off"
                          class="layui-input"
                        />
                      </div>
                      <div class="layui-form-mid layui-word-aux">
                        <span style="color: #c00">
                          {{ errors[0] }}
                        </span>
                      </div>
                    </validationProvider>
                  </div>
                  <div class="layui-form-item">
                    <label for="L_username" class="layui-form-label"
                      >昵称</label
                    >
                    <validationProvider
                      rules="min:1"
                      v-slot="{ errors }"
                      name="nickName"
                    >
                      <div class="layui-input-inline">
                        <input
                          type="text"
                          name="nickName"
                          v-model="member.nickName"
                          placeholder="请输入昵称"
                          autocomplete="off"
                          class="layui-input"
                        />
                      </div>
                      <div class="layui-form-mid layui-word-aux">
                        <span style="color: #c00">
                          {{ errors[0] }}
                        </span>
                      </div>
                    </validationProvider>
                  </div>
                  <div class="layui-form-item">
                    <label for="L_pass" class="layui-form-label">密码</label>
                    <validationProvider
                      rules="required|min:6"
                      v-slot="{ errors }"
                      name="password"
                    >
                      <div class="layui-input-inline">
                        <input
                          type="password"
                          name="password"
                          v-model="member.password"
                          placeholder="请输入密码"
                          autocomplete="off"
                          class="layui-input"
                        />
                      </div>
                      <div class="layui-form-mid layui-word-aux">
                        <span style="color: #c00">
                          {{ errors[0] }}
                        </span>
                      </div>
                    </validationProvider>
                  </div>
                  <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label"
                      >确认密码</label
                    >
                    <validationProvider rules="required|min:6" v-slot="{errors}" name="password">
                      <div class="layui-input-inline">
                        <input
                          type="password"
                          name="repass"
                          v-model="member.repassword"
                          autocomplete="off"
                          class="layui-input"
                        />
                      </div>
                      <div class="layui-form-mid layui-word-aux">
                        <span style="color: #c00">
                          {{ errors[0] }}
                        </span>
                      </div>
                    </validationProvider>
                  </div>
                  <div class="layui-form-item">
                    <label for="L_vercode" class="layui-form-label"
                      >验证码</label
                    >
                    <validationProvider rules="required|min:4" v-slot="{errors}" name="captcha">
                      <div class="layui-input-inline">
                        <input
                          type="text"
                          name="captcha"
                          v-model="captcha"
                          placeholder="请输入验证码"
                          autocomplete="off"
                          class="layui-input"
                        />
                      </div>
                      <div class="captchaCode layui-form-mid">
                        <img
                          @click="getCaptchaCode"
                          id="captchaCode"
                          alt="验证码"
                        />
                      </div>
                      <div class="layui-form-mid">
                        <span style="color: #c00">
                          {{ errors[0] }}
                        </span>
                      </div>
                    </validationProvider>
                  </div>
                  <div class="layui-form-item">
                    <button class="layui-btn" lay-filter="*" lay-submit @click="registerMember">
                      立即注册
                    </button>
                  </div>
                  <div class="layui-form-item fly-form-app">
                    <span>或者直接使用社交账号快捷注册</span>
                    <a
                      href=""
                      onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})"
                      class="iconfont icon-qq"
                      title="QQ登入"
                    ></a>
                    <a
                      href=""
                      onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})"
                      class="iconfont icon-weibo"
                      title="微博登入"
                    ></a>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ValidationProvider } from "vee-validate";
export default {
  name: "Register",
  components: { ValidationProvider },
  data() {
    return {
      captcha:"",
      member: {
        loginName: "",
        nickName: "",
        email: "",
        password: "",
        repassword: "",
        mobile: "",
        imgCodeToken: "",
      },
    };
  },
  mounted() {
    this.getCaptchaCode();
  },
  methods: {
    getCaptchaCode() {
      this.member.imgCodeToken = Tool.get8UUID(8);
      $("#captchaCode").attr(
        "src",
        process.env.VUE_APP_SERVER +
          "/business/member/captcha/code/" +
          this.member.imgCodeToken
      );
    },
    //会员注册
    registerMember() {
      console.log(
        "用户名：",
        this.member.loginName,
        "手机号",
        this.member.mobile,
        "密码：",
        this.member.password,
        "验证码：",
        this.captcha
      );
      this.$axios
        .post(process.env.VUE_APP_SERVER + "/business/member/save", this.member)
        .then((response) => {
          let resp = response.data;
          console.log("保存的会员：", resp);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.layui-form-mid {
  margin-top: -8px;
}
.captchaCode {
  cursor: pointer;
}
</style>